<template>
<div class="showbox" :style="{width: (showOrtab? 'auto' : '320px')}">
    <div class="leftbox">
        <div class="imgbox1">
            <img :src="setImg(people)" :alt="people.name">
        </div>
        <div class="name">{{people.name}}</div>
        <div class="agebox">
            <span class="age">年龄:{{people.age}}</span>
        </div>
        <div class="agebox">
            <span class="age">生日:{{people.birthday}}</span>
        </div>
        <div class="agebox">
            <span class="age">工作:{{people.job}}</span>
        </div>
        <div class="agebox more">更多:{{people.more}}
        </div>
    </div>
    <div class="rightbox" v-if="showOrtab">
        <div class="lisbox" :class="active==index?'activeclass':''" v-for="(item,index) in details" :key="index" @mouseenter="setAct(index)" @click="focusli(item)">
            <div class="imgbox">
                <img :src="setImg(item)" :alt="item.tap">
                <div class="numb">{{setNumb(index)}}</div>
                <div class="numb2">{{item.startDate}}</div>
            </div>
            <div class="tipbox">
                O{{item.tap}} : {{item.abouts}}
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "show",
    props: {
        details: Array,
        showOrtab: Boolean,
        people: Object,
    },
    data() {
        return {
            active:0
        };
    },
    mounted() {
    },
    methods: {
        setNumb(i) {
            return i < 9 ?'0'+(i+1):i+1
        },
        setAct(i) {
            this.active = i
        },
        setImg(i) {
            console.log('setImg',i)
            if(i.onLine){
                return i.img
            }else{
                return require(`@/assets/picture/${i.img}`)
            }
        },
        focusli(i) {
            this.$emit('handleUpdate',i)
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.showbox{
    display: flex;
    width: auto;
}
.leftbox{
    flex: 320px 0 0;
    width: 320px;
    background-color: #ffa955;
    padding-top: 100px;
    position: fixed;
    height: 100vh;
    overflow: hidden;
    .imgbox1{
        width: 240px;
        height: 300px;
        border-radius: 50% 50%;
        overflow: hidden;
        margin: auto;
    }
    img{
        width: 100%;
        height: 100%;
    }
    .name{
        font-size: 38px;
        position: relative;
        font-family: cursive;
        left: 20px;
        top:-20px;
        color: #e69347;
        font-weight: bolder;
        text-shadow:3px 3px #fff;
    }
    .agebox{
        margin-top: 15px;
        overflow: hidden;
    }
    .age{
        position: relative;
        left: 20px;
        padding: 0 5px;
        color: #e69347;
        font-size: 22px;
        background-color: #fef4d1;
        border-radius: 5px;
        font-weight: bolder;
    }
    .more{
        padding: 0 5px;
        color: #e69347;
        font-size: 22px;
        margin: 15px 20px 0;
        background-color: #fef4d1;
        border-radius: 5px;
        font-weight: bolder;
    }
}
.rightbox{
    flex: 1;
    min-height: 100vh;
    padding-left: 320px;
    background-color: #fce3b7;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    overflow: hidden;
    .lisbox{
        width: 440px;
        height: 220px;
        border: 6px solid;
        border-color: #e69347;
        border-radius: 40px 40px;
        box-sizing: border-box;
        margin: 220px 40px 0;
        position: relative;
        background-color: #ffedd0;
    }
    .imgbox{
        width: 440px;
        height: 220px;
        border: 3px solid #e69347;
        border-radius: 40px 40px;
        box-sizing: border-box;
        position: absolute;
        top: -120px;
        left: -20px;
        img{
            border-radius: 37px 37px;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        .numb{
            position: absolute;
            left: 0;
            top: -50px;
            font-size: 38px;
            color: #e69347;
            font-weight: bolder;
        }
        .numb2{
            position: absolute;
            right: 20px;
            bottom: 10px;
            // font-size: 12px;
            color: #e69347;
            font-weight: bolder;
        }
    }
    .tipbox{
        height: 80px;
        position: absolute;
        top: 120px;
        color: #e69347;
        font-weight: bolder;
        padding: 0 5px;
        box-sizing: border-box;
        width:100%;
        line-height:20px;
         /* 关键代码 */
        overflow:hidden; 

        // background: red;
        display:-webkit-box; 

        -webkit-box-orient:vertical;

        -webkit-line-clamp:4; 
        text-overflow:ellipsis;

    }
    .activeclass{
        background-color: #e69347;
        border-color: #ffedd0;
        .tipbox{
            color: #ffedd0;
        }
        .imgbox{
            width: 450px;
            height: 230px;
            background-color: #ffedd0;
            padding: 5px;
            top: -125px;
            left: -25px;
            z-index: 2;
            img{
                border: 3px solid #e69347;
                box-sizing: border-box;
            }
            .numb{
                top: -60px;
                font-size: 52px;
            }
            .numb2{
                color: #ffedd0;
                right: 25px;
                bottom: 15px;
            }
        }
        
    }
}
.lisbox:nth-child(n){
    .imgbox{
        transform: rotate(6deg);
    }
}
.lisbox:nth-child(2n){
    .imgbox{
        transform: rotate(-6deg);
    }
}
.lisbox:nth-child(3n){
    .imgbox{
        transform: rotate(-4deg);
    }
}
.lisbox:nth-child(4n){
    .imgbox{
        transform: rotate(-4deg);
    }
}
.lisbox:nth-child(5n){
    .imgbox{
        transform: rotate(0deg);
    }
}
.lisbox:nth-child(6n){
    .imgbox{
        transform: rotate(6deg);
    }
}
</style>
